<template>
<div class="personal-container">
  <var-loading :loading="loading">
    <div class="top">
      <var-icon
          @click="gotoSettings"
          name="cog-outline" size="30" style="float: right;margin-right: 5px;padding-top: 20px"/>
    </div>
    <div class="card1">
      <div class="user-info">
        <var-image
            width="85px"
            height="85px"
            fit="cover"
            :radius="10"
            :src="isLogin && isAccept ? Base64.getImg(headIcon) : 'https://varlet.gitee.io/varlet-ui/cat.jpg'"
            style="float: left"
            @click="openImage"
        />
        <div style="float: right">
          <h2>{{ isLogin ? `${store.state.userModel.username}` : `游客` }}</h2>
          <h5 style="padding-top: 20px">id:${{ isLogin ? `${store.state.userModel.id}` : `游客id`}}</h5>
        </div>
      </div>
    </div>
    <div class="card2">
      <div class="title">
        <h3>我的学习</h3>
      </div>
      <div class="content">
        <div class="item" @click="gotoWordList">
          <img src="../../assets/static/英语.png" alt="">
          <span>查看当前单词库</span>
        </div>
        <div class="item" @click="gotoWordRecord">
          <img src="../../assets/static/考研.png" alt="">
          <span>英语学习记录</span>
        </div>
        <span style="margin-top: 25px;text-align: center">更多功能正在开发中...</span>
      </div>
    </div>
  </var-loading>
</div>
</template>

<script lang="ts" setup>
import router from "@/router";
import {Dialog, ImagePreview} from "@varlet/ui";
import {onMounted, ref} from "vue";
import store from "@/store";
import Base64 from "@/utils/base64";
import {getAvatar} from "@/api/user";

const isLogin = ref(false)
const headIcon = ref('')
const loading = ref(true)
const isAccept = ref(true)    //是否接收到图片

const gotoSettings = () => {
  router.push('/main/settings');
}
const gotoWordList = () => {
  router.push('/main/wordList')
}
const openImage = () => {
  ImagePreview(Base64.getImg(headIcon.value))
}
const gotoWordRecord = () => {
  if (store.state.userModel !== null) {
    router.push('/main/wordRecord')
  } else {
    Dialog('当前账号未登录，请登录后再试')
  }
}
onMounted(() => {
  isLogin.value = store.state.userModel != null;
  if (isLogin.value) {
    getAvatar(store.state.userModel.id)
        .then(res => {
          if (res.code == 400) {
            isAccept.value = false;
          } else {
            headIcon.value = res.data
          }
        })
        .finally(() => {
          loading.value = false
        })
  } else {
    loading.value = false
  }
})
</script>

<style scoped>
.personal-container{
  height: 100%;
  width: 90%;
  margin-left: 5%;
}
.top{
  height: 50px;
  width: 100%;
}
.card1{
  margin-top: 20px;
  height: 150px;
  width: 100%;
  background-color: #fff;
  box-shadow: 2px 2px 2px 2px #ececec;
}
.card2{
  margin-top: 20px;
  height: 250px;
  width: 100%;
  background-color: #fff;
  box-shadow: 2px 2px 2px 2px #ececec;
}
.user-info{
  width: 80%;
  padding-left: 10%;
  padding-top: 10%;
}
.content{
  width: 80%;
  padding-left: 10%;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.title{
  padding-left: 20px;
  padding-top: 20px;
}
.item{
  display: flex;
  flex-direction: column;
  height: 80px;
  width: 100px;
}
.item>img{
  width: 60px;
  height: 60px;
  padding-left: 18px;
}
</style>